<template>
  <div class="EIManage-container">
    <page-header
      type="EIManage"
      @add="addSucess"
      @reset="resetSeach"
      @searchChange="searchData"
    />
    <pagination-table
      ref="ptable"
      :tableData="pageData.listData"
      @pagination="paginaChange"
    >
      <XMTableColumn label="标题" prop="title"></XMTableColumn>
      <XMTableColumn label="创建时间" prop="createTime"></XMTableColumn>
      <XMTableColumn label="收集问卷数" prop="totalQuestion"></XMTableColumn>
      <XMTableColumn label="状态" prop="status">
        <template #default="scope">
          {{ scope.row.status === 1 ? '已启用' : '已禁用' }}
        </template>
      </XMTableColumn>
      <XMTableColumn label="操作" min-width="100">
        <template #default="scope">
          <div class="btn-hubs">
            <el-button
              size="small"
              type="primary"
              @click="handle(scope.row, 1)"
            >
              编辑
            </el-button>
            <el-button
              size="small"
              type="primary"
              @click="handle(scope.row, 6)"
            >
              编辑就诊医院
            </el-button>
            <el-button
              size="small"
              type="primary"
              @click="handle(scope.row, 2)"
            >
              查看
            </el-button>
          </div>
          <div class="btn-hubs">
            <el-button
              size="small"
              type="primary"
              @click="handle(scope.row, 3)"
            >
              二维码
            </el-button>
            <el-button
              size="small"
              type="primary"
              @click="handle(scope.row, 4)"
            >
              {{ scope.row.status === 1 ? '禁用' : '启用' }}
            </el-button>
            <el-button size="small" type="danger" @click="handle(scope.row, 5)">
              删除
            </el-button>
          </div>
        </template>
      </XMTableColumn>
    </pagination-table>
    <EIDialogVue
      v-model:isVisble="pageData.isVisble"
      :type="pageData.dialogType"
      :flowData="form"
      @toUpdate="loadData"
    ></EIDialogVue>
  </div>
</template>
<script setup>
  import { ref, reactive } from 'vue'
  import { useRouter } from 'vue-router'
  import { useStore } from 'vuex'
  import moment from 'moment'
  import { modifyFlow, flowList, saveFlow } from '@/api/modules/flow.js'
  import { ElMessage } from 'element-plus'
  import { onMountedOrActivated } from '@/hooks/core/onMountedOrActivated.js'
  import EIDialogVue from '../components/EIDialog.vue'
  import common from '@/utils/common'
  const pageData = reactive({
    listData: [],
    isVisble: false,
    addTitle: null,
    search: { pageIndex: 1, pageSize: 5 },
    dialogType: null,
  })

  const resetSeach = () => {
    pageData.search = { pageIndex: 1, pageSize: 5 }
    ptable.value.clearData()
    loadData()
  }
  const searchData = function (params) {
    pageData.search.title = params.value1
    pageData.search.startDay = params.value2.start
      ? moment(params.value2.start).format('YYYY-MM-DD')
      : null
    pageData.search.endDay = params.value2.end
      ? moment(params.value2.end).format('YYYY-MM-DD')
      : null
    pageData.search.status = params.value3
    pageData.search.ptNo = params.value4
    loadData()
  }
  const paginaChange = function (params) {
    pageData.search.pageIndex = params.current
    pageData.search.pageSize = params.pageSize
    pageData.search.orderType = params.orderType
    loadData()
  }
  const ptable = ref(null)
  const formRef = ref(null)
  const form = ref({ wjxUrl: null, title: null, status: null, id: null })
  const loadData = async () => {
    const res = await flowList(pageData.search)
    pageData.listData = res
  }

  const router = useRouter()
  const store = useStore()
  const handle = async function (params, type) {
    const { id, hospitalId, questionnaireId, title, wjxUrl, status } = params
    switch (type) {
      case 1:
        form.value = { id, questionnaireId, title, wjxUrl, status }
        pageData.isVisble = true
        pageData.dialogType = 'wjx'
        break
      case 6:
        // edit id,
        form.value = { hospitalId, flowId: id, title, wjxUrl, status }
        pageData.isVisble = true
        pageData.dialogType = 'edit'
        break
      case 2:
        // View details
        router.push({
          name: 'epidemiologicalInvestigationInfo',
          query: { flowId: id },
        })
        break
      case 3: {
        // qr code
        const flowUrl = encodeURIComponent(wjxUrl)
        store.dispatch('qrcode/setQRCodeShowData', {
          config: { showTextbar: false },
          data: [
            {
              name: title,
              text: [
                // eslint-disable-next-line max-len
                `https://devtest.c-sams.com/qrcode?flowId=${id}&questionnaireId=${questionnaireId}&orgId=${store.getters.userInfo.orgId}&userId=${store.getters.userInfo.userId}&scanType=2`,
              ],
            },
          ],
        })
        break
      }
      case 4:
        // change status （id status）
        await modifyFlow({ status: status === 1 ? 2 : 1, id })
        loadData()
        break
      case 5:
        // delete
        common.XmAlert('该操作会删除初筛，请确认', async () => {
          await modifyFlow({ status: 3, id })
          loadData()
        })

        break
      default:
        break
    }
  }

  onMountedOrActivated(() => {
    loadData(pageData.search)
    store.dispatch('presetData/getQuestionnaireInfoList')
  })

  // 新增接诊患者
  const addSucess = function (data) {
    // pageData.isVisble = true
    pageData.isVisble = true
    pageData.flowData = data
    pageData.dialogType = 'add_wjx'
    form.value = {}
  }
</script>

<style lang="scss" scoped>
  .EIManage-container {
    margin: 32px;
    background-color: white;

    .btn-hubs {
      display: flex;
      align-items: center;
      justify-content: start;
    }

    .btn-hubs:nth-child(2) {
      margin-top: 11px;
    }
  }
</style>
